<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item :label="`${$t('merchant.merchant_name')}:`">
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-button
							:disabled="loading"
							icon="el-icon-search"
							size="medium"
							type="primary"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							:disabled="loading"
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('803041')"
							:disabled="loading"
							icon="el-icon-plus"
							size="medium"
							type="success"
							@click="editAndAdd"
						>
							{{ $t('common.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					:data="tableData"
					:header-cell-style="getRowClass"
					border
					class="small-size-table"
					element-loading-spinner="el-icon-loading"
					style="width: 100%"
				>
					<el-table-column
						:label="$t('merchant.merchant_name')"
						:show-overflow-tooltip="true"
						align="center"
						prop="merchantName"
						width="160px"
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.rechange_channel')"
						:show-overflow-tooltip="true"
						align="center"
						prop="channelRecharge"
						width="200px"
					>
						<template slot-scope="scope">
							{{
								caluctaleRechargeChanel(
									scope.row.channelRecharge
								) || '-'
							}}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.draw_channel')"
						:show-overflow-tooltip="true"
						align="center"
						prop="channelWithdraw"
						width="200px"
					>
						<template slot-scope="scope">
							{{
								caluctaleWithChanel(
									scope.row.channelWithdraw
								) || '-'
							}}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.creator')"
						:show-overflow-tooltip="true"
						align="center"
						prop="createdBy"
					>
						<template slot-scope="scope">
							{{ scope.row.createdBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.create_time')"
						:show-overflow-tooltip="true"
						align="center"
						prop="createdAt"
						width="180"
					>
						<template slot-scope="scope">
							{{ scope.row.createdAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.last_operate')"
						:show-overflow-tooltip="true"
						align="center"
						prop="updatedBy"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.last_operate_time')"
						:show-overflow-tooltip="true"
						align="center"
						prop="updatedAt"
						width="180"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('common.actions')"
						align="center"
						prop="operating"
						width="120"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('803042')"
								size="medium"
								type="text"
								@click="editAndAdd(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--弹窗-->
			<el-dialog
				:before-close="clear"
				:destroy-on-close="true"
				:title="`${$t('merchant.merchant_pay_channel')}${title}`"
				:visible.sync="dialogFormVisible"
				width="565px"
				@close="clear"
			>
				<el-form
					ref="formSub"
					:model="dialogForm"
					:rules="rules"
					label-width="auto"
				>
					<el-form-item
						v-if="title !== `${$t('common.modify')}`"
						:label="`${$t('merchant.merchant_select')}:`"
						:placeholder="$t('common.please_choose')"
						prop="merchantId"
						style="width: 370px"
					>
						<el-select
							v-model.trim="dialogForm.merchantId"
							style="width: 370px"
						>
							<el-option
								v-for="item in merchartList"
								:key="item.id"
								:disabled="item.disabled"
								:label="item.merchantName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-else
						:label="`${$t('merchant.merchant_select')}:`"
						prop="merchantId"
					>
						<merchant-select
							v-model.trim="dialogForm.merchantId"
							:disabled="title === $t('common.modify')"
							:placeholder="$t('common.please_choose')"
							style="width: 370px"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.rechange_channel')}:`"
						:rules="[
							{
								required: true,
								message: `${$t(
									'merchant.pay_channel_placeholder'
								)}`,
								trigger: 'change'
							}
						]"
						prop="rechargeId"
					>
						<el-select
							v-model="dialogForm.rechargeId"
							:placeholder="$t('common.please_choose')"
							autocomplete="off"
							clearable
							multiple
							style="width: 370px"
						>
							<el-option
								v-for="(item, index) in rechargeIdList"
								:key="index"
								:label="item.channelName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.draw_channel')}:`"
						:rules="[
							{
								required: true,
								message: `${$t(
									'merchant.draw_channel_placeholder'
								)}`,
								trigger: 'change'
							}
						]"
						prop="withdrawId"
					>
						<el-select
							v-model="dialogForm.withdrawId"
							:placeholder="$t('common.please_choose')"
							autocomplete="off"
							clearable
							multiple
							style="width: 370px"
						>
							<el-option
								v-for="(item, index) in drawIdList"
								:key="index"
								:label="item.channelName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.remark_info')}:`"
						:rules="[
							{
								required: true,
								message: $t('merchant.check_length_2'),
								trigger: 'change'
							},
							{
								min: 2,
								max: 500,
								message: $t('merchant.check_length_2'),
								trigger: 'change'
							}
						]"
						prop="remark"
						style="margin-top: 15px"
					>
						<el-input
							v-model.trim="dialogForm.remark"
							:placeholder="$t('common.please_enter')"
							maxlength="500"
							rows="6"
							show-word-limit
							type="textarea"
						></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button :loading="btnLoading" @click="clear()">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						:disabled="btnLoading"
						:loading="btnLoading"
						type="primary"
						@click="subAddOrEdit"
					>
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import {
	addMerchantChannelApi,
	queryMerchantChannelListApi,
	updateMerchantChannelApi
} from '@/api/merchant/merchant-config/payment-channel-config'
import funds from '@/api/funds'
import { queryMerchantListApi } from '@/api/merchant/merchant-manage/merchant-list'

export default {
	name: routerNames.paymentChannelConfig,
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			queryData: {
				merchantId: undefined
			},
			rules: {
				merchantId: [
					{
						required: true,
						message: this.$t('merchant.merchant_placeholder'),
						trigger: 'change'
					}
				]
			},
			tableData: [],
			merchartList: [],
			rechargeIdList: [],
			drawIdList: [],
			dialogFormVisible: false,
			dialogForm: {
				merchantId: undefined,
				rechargeId: [],
				withdrawId: []
			},
			title: '',
			btnLoading: false
		}
	},
	methods: {
		// 获取商户列表
		async getMerchantList() {
			try {
				this.loading = true
				const { data } = await queryMerchantListApi({})
				this.merchartList = data
			} catch (e) {
				this.loading = false
			}
		},
		// 获取充值通道列表
		async rechargeList() {
			try {
				const {
					data: rechargeData
				} = await funds.queryPaymentMerchantConfigList({
					paymentMerchantType: 1,
					pageNum: 1,
					pageSize: 1000
				})
				const {
					data: drawData
				} = await funds.queryPaymentMerchantConfigList({
					paymentMerchantType: 2,
					pageNum: 1,
					pageSize: 1000
				})
				this.rechargeIdList = rechargeData?.record
				this.drawIdList = drawData?.record
			} catch (e) {
				console.log(e)
			}
		},
		// 获取列表
		async loadData() {
			try {
				this.loading = true
				const res = await queryMerchantChannelListApi({
					...this.queryData
				})
				this.tableData = res.data

				await this.rechargeList()

				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		// 编辑和新增弹窗
		async editAndAdd(row) {
			this.$refs.formSub && this.$refs.formSub.clearValidate()
			if (row.merchantId) {
				this.title = this.$t('common.modify')
				row.rechargeId =
					(row?.channelRecharge && row?.channelRecharge.split(',')) ||
					''
				row.withdrawId =
					(row?.channelWithdraw && row?.channelWithdraw.split(',')) ||
					''
				this.dialogForm = { ...row }
				this.dialogFormVisible = true
			} else {
				this.title = this.$t('common.add')
				this.dialogForm = { rechargeId: [], withdrawId: [] }
				this.merchartList.length = 0

				this.loading = true
				const { data } = await queryMerchantChannelListApi({})
				await this.getMerchantList()
				data &&
					data.map((table) => {
						this.merchartList.map((merchant) => {
							if (table.merchantId === merchant.id) {
								merchant.disabled = true
							}
						})
					})
				this.loading = false
				this.dialogFormVisible = true
			}
		},
		reset() {
			this.queryData = {}
			this.loadData()
		},
		subAddOrEdit() {
			this.$refs.formSub.validate(async (validate) => {
				if (validate) {
					this.btnLoading = true
					const params = {
						merchantId: this.dialogForm.merchantId,
						rechargeId: this.dialogForm.rechargeId.join(','),
						remark: this.dialogForm.remark,
						withdrawId: this.dialogForm.withdrawId.join(',')
					}
					try {
						this.title === this.$t('common.add')
							? await addMerchantChannelApi(params)
							: await updateMerchantChannelApi(params)

						this.$message({
							message: `${this.$t('common.action_success')}`,
							type: 'success'
						})
						this.btnLoading = false
						this.dialogFormVisible = false
						this.clear()
						await this.loadData()
					} catch (e) {
						this.btnLoading = false
					}
				}
			})
		},
		// 计算充值通道列表
		caluctaleRechargeChanel(row) {
			const _arr = (row || '').split(',')
			let str = ''
			_arr.map((item, index) => {
				this.rechargeIdList.map((i) => {
					if (i.id === item) {
						if (index === 0) {
							str = str + i.channelName
						} else {
							str = str + ' , ' + i.channelName
						}
					}
				})
			})

			return str
		},
		caluctaleWithChanel(row) {
			const _arr = (row || '').split(',')
			let str = ''
			_arr.map((item, index) => {
				this.drawIdList.map((i) => {
					if (i.id === item) {
						if (index === 0) {
							str = str + i.channelName
						} else {
							str = str + ' , ' + i.channelName
						}
					}
				})
			})

			return str
		},
		clear() {
			this.dialogForm = { merchantId: undefined }
			this.dialogForm.rechargeId = []
			this.dialogForm.withdrawId = []
			this.dialogFormVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}

::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}

::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}

.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fenye {
	text-align: center;
}
</style>
